<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AR扫描</title>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image-aframe.prod.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        a-scene {
            width: 100% !important;
            height: 100% !important;
        }
        .position-info {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            z-index: 1000;
            font-family: monospace;
        }
    </style>
</head>
<body>

<div class="position-info" id="positionInfo">位置: 下方</div>

<a-scene
        mindar-image="imageTargetSrc: ./models/card.mind; autoStart: true;"
        embedded
        vr-mode-ui="enabled: false"
        loading-screen="enabled: false">

    <a-assets>
        <video id="mudan-video" src="./images/mudan.mp4" loop muted playsinline></video>
    </a-assets>

    <a-camera active="true" position="0 0 0"></a-camera>

    <a-entity mindar-image-target="targetIndex: 0">
        <!-- 测试不同位置 -->
        <a-plane
                src="#mudan-video"
                position="0 -0.8 0"
        width="1.0"
        height="0.75"
        transparent="true"
        alpha-test="0.1"
        id="video-plane">
        </a-plane>
    </a-entity>

</a-scene>

<script>
    const target = document.querySelector('[mindar-image-target]');
    const video = document.querySelector('#mudan-video');
    const videoPlane = document.querySelector('#video-plane');
    const positionInfo = document.querySelector('#positionInfo');

    let currentPosition = '下方';
    const positions = {
        '上方': '0 0.8 0',
        '中心': '0 0 0',
        '下方': '0 -0.8 0',
        '左方': '-0.8 0 0',
        '右方': '0.8 0 0'
    };

    target.addEventListener('targetFound', function() {
        console.log('识别成功，播放视频');
        video.play().catch(e => console.log('等待用户交互'));
    });

    target.addEventListener('targetLost', function() {
        video.pause();
    });

    // 点击切换位置
    document.addEventListener('click', function(event) {
        if (video.paused) {
            video.play();
        } else {
            // 切换位置
            const positionKeys = Object.keys(positions);
            const currentIndex = positionKeys.indexOf(currentPosition);
            const nextIndex = (currentIndex + 1) % positionKeys.length;
            currentPosition = positionKeys[nextIndex];

            videoPlane.setAttribute('position', positions[currentPosition]);
            positionInfo.textContent = '位置: ' + currentPosition;
            console.log('切换到位置:', currentPosition);
        }
    });
</script>
</body>
</html>